import styles from './index.less';
import { useState, useEffect } from 'react';
import './index.css';
import { Layout, Menu, Input, Button, Dropdown } from 'antd';
import { history } from 'umi';
//撰写功能选项
const items = [
  {
    key: '1',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.aliyun.com"
      >
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.luohanacademy.com"
      >
        3rd menu item
      </a>
    ),
  },
];

export default function IndexPage(props) {
  //登录按钮111
  const LogIn = () => {
    setArelog(true);
  };

  //控制登录按钮和个人信息的转换
  const [arelog, setArelog] = useState(false);

  let [current, setCurrent] = useState('');
  const changeMenu = (e: any) => {
    history.push('/' + e.key);
  };
  return (
    <div className={styles.home}>
      <Layout style={{ height: '100%' }}>
        <Layout.Header
          style={{
            borderTop: '2px solid #00965e',
            height: 65,
            lineHeight: '63px',
            backgroundColor: '#ffffff',
            textAlign: 'center',
            boxShadow: ' 0 1px 2px rgba(0,0,0,.075) !important',
            position: 'sticky',
            top: '0',
          }}
        >
          <img
            width="200"
            style={{ marginRight: 13 }}
            src={require('../../public/images/logo.svg')}
          />
          <Menu
            style={{
              display: 'inline-block',
              marginLeft: 12,
              fontWeight: 'bold',
              fontSize: 16,
              color: '#737373',
            }}
            onClick={changeMenu}
            defaultOpenKeys={['answers']}
            defaultSelectedKeys={[history.location.pathname.split('/')[1]]}
            mode="horizontal"
            items={[
              { label: '问答', key: 'answers' },
              { label: '专栏', key: 'special' },
              { label: '标签', key: 'label' },
            ]}
          />
          <Input.Search
            style={{ width: '540px', marginLeft: 15, verticalAlign: '-11px' }}
            placeholder="搜索关键字"
          />
          <div className={styles.home_info}>
            {/* 未登录时的注册登录按钮 */}
            <button
              className={styles.home_logBut}
              style={{ display: arelog ? 'none' : '' }}
              onClick={LogIn}
            >
              注册登录
            </button>
            {/* 撰写按钮 */}
            <Dropdown
              className={styles.home_Dropdown}
              menu={{
                items,
              }}
              placement="bottom"
            >
              <Button style={{ display: arelog ? '' : 'none' }}>
                撰写
                <svg
                  t="1678759044063"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5382"
                  width="10"
                  height="10"
                >
                  <path
                    d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z"
                    p-id="5383"
                    fill="#ffffff"
                  ></path>
                </svg>
              </Button>
            </Dropdown>
            {/* 铃铛图标 */}
            <svg
              t="1678758482003"
              style={{ display: arelog ? '' : 'none' }}
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3024"
              width="30"
              height="25"
            >
              <path
                d="M512 212l48.8 12c101.6 24.8 176 117.6 176 220.8v254.4l18.4 18.4 24.8 25.6h-536l24.8-25.6 18.4-18.4V444.8c0-103.2 73.6-196.8 176-220.8l48.8-12M512 64c-36.8 0-64 30.4-64 68v30.4C320.8 192 223.2 307.2 223.2 444.8v228.8L136 763.2v44.8h752v-44.8l-87.2-89.6V444.8c0-137.6-97.6-252.8-224.8-283.2v-28.8c0-32-17.6-60.8-48-67.2-5.6-1.6-11.2-1.6-16-1.6z m88 808H424c0 49.6 38.4 88 88 88s88-38.4 88-88z"
                p-id="3025"
                fill="#868686"
              ></path>
            </svg>
            {/* 邮件图标 */}
            <svg
              t="1678758566692"
              style={{ display: arelog ? '' : 'none' }}
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4361"
              width="30"
              height="26"
            >
              <path
                d="M893.842 2%.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z"
                fill="#868686"
                p-id="4362"
              ></path>
            </svg>
            {/* 头像 */}
            <img
              src={require('./image/拄下巴狗.jpg')}
              width="30px"
              style={{ borderRadius: '50%', display: arelog ? '' : 'none' }}
              alt=""
            />
          </div>
        </Layout.Header>
        <Layout.Content style={{ background: '#e9ecef' }}>
          <div className={styles.content}>{props.children}</div>
          <div className={styles.home_bottom}>
            <div className={styles.home_bottom_ez}>
              <ul>
                <li>
                  <b>产品</b>
                </li>
                <li>热门问答</li>
                <li>热门专栏</li>
                <li>热门课程</li>
                <li>最新活动</li>
                <li>翻译</li>
                <li>酷工作</li>
              </ul>
              <ul>
                <li>
                  <b>课程</b>
                </li>
                <li>Java开发课程</li>
                <li>PHP开发课程</li>
                <li>Python开发课程</li>
                <li>前端开发课程</li>
                <li>移动开发课程</li>
                <li>&nbsp;</li>
              </ul>
              <ul>
                <li>
                  <b>资源</b>
                </li>
                <li>每周精选</li>
                <li>用户排行榜</li>
                <li>帮助中心</li>
                <li>建议反馈</li>
                <li>&nbsp;</li>
                <li>&nbsp;</li>
              </ul>
              <ul>
                <li>
                  <b>合作</b>
                </li>
                <li>关于我们</li>
                <li>广告投放</li>
                <li>职位发布</li>
                <li>讲师招募</li>
                <li>联系我们</li>
                <li>合作伙伴</li>
              </ul>
              <ul>
                <li>
                  <b>关注</b>
                </li>
                <li>产品技术日志</li>
                <li>社区运营日志</li>
                <li>市场运营日志</li>
                <li>团队日志</li>
                <li>社区访谈</li>
                <li>&nbsp;</li>
              </ul>
              <ul>
                <li>
                  <b>条款</b>
                </li>
                <li>服务协议</li>
                <li>隐私政策</li>
                <li>下载App</li>
                <li>最新活动</li>
                <li>
                  <img src={require('./image/gzh.png')} width="70px" alt="" />
                </li>
              </ul>
              <div className={styles.home_bottom_ez_xian}></div>
              <div className={styles.home_bottom_ez_font}>
                <p>
                  Copyright @ 2011-2023 SegmentFault, 当前呈现版本 23.03.13{' '}
                  <span>
                    <svg
                      t="1678765311369"
                      className="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="5704"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M960.018292 617.246019c0-126.002762-126.101-228.688469-267.646759-228.688469-149.94915 0-268.014126 102.685707-268.014126 228.688469 0 126.205377 118.064976 228.684376 268.014126 228.684376 31.360242 0 63.034639-7.90504 94.555539-15.817244l86.428442 47.359634-23.729447-78.785368C912.906298 751.268432 960.018292 688.301332 960.018292 617.246019zM605.458043 577.828264c-15.699564 0-31.492248-15.616676-31.492248-31.56388 0-15.689331 15.793708-31.492248 31.492248-31.492248 23.852244 0 39.431058 15.802918 39.431058 31.492248C644.889101 562.211589 629.310288 577.828264 605.458043 577.828264zM778.790764 577.828264c-15.58086 0-31.290657-15.616676-31.290657-31.56388 0-15.689331 15.71082-31.492248 31.290657-31.492248 23.61893 0 39.435151 15.802918 39.435151 31.492248C818.225915 562.211589 802.409694 577.828264 778.790764 577.828264zM666.702919 365.928157c10.239202 0 20.342304 0.718361 30.380938 1.840928-27.325345-126.936017-163.051563-221.242893-317.967842-221.242893-173.250856 0-315.13533 118.065999-315.13533 267.974217 0 86.532819 47.24707 157.622924 126.066207 212.738196l-31.472805 94.833879 110.158912-55.258535c39.437198 7.780197 71.055312 15.801894 110.383016 15.801894 9.890254 0 19.698644-0.478907 29.426193-1.240247-6.176676-21.079084-9.720386-43.168172-9.720386-66.032926C398.821823 477.640448 517.023922 365.928157 666.702919 365.928157zM497.291508 280.516882c23.707958 0 39.427988 15.568581 39.427988 39.306214 0 23.617907-15.72003 39.420825-39.427988 39.420825-23.613814 0-47.349401-15.802918-47.349401-39.420825C449.942107 296.085462 473.677695 280.516882 497.291508 280.516882zM276.722974 359.243921c-23.572882 0-47.443545-15.802918-47.443545-39.420825 0-23.737634 23.870664-39.306214 47.443545-39.306214 23.64042 0 39.315424 15.568581 39.315424 39.306214C316.038398 343.441003 300.36237 359.243921 276.722974 359.243921z"
                        p-id="5705"
                        fill="#6c757d"
                      ></path>
                    </svg>
                    <svg
                      t="1678765583694"
                      className="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2510"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M798.668323 540.621118c0 152.645963 139.925466 203.52795 146.285714 203.52795 0 6.360248-25.440994 69.962733-76.322981 146.285715-44.521739 63.602484-89.043478 120.84472-165.36646 127.204969-69.962733 0-95.403727-38.161491-178.086956-38.161491-82.68323 0-108.124224 38.161491-171.726708 44.521739-69.962733 0-120.84472-69.962733-165.36646-127.204969C99.040994 769.590062 29.078261 540.621118 118.121739 381.614907c44.521739-76.322981 127.204969-127.204969 222.608696-127.204969 69.962733 0 133.565217 44.521739 178.086956 44.521739 44.521739 0 120.84472-57.242236 203.527951-44.521739 31.801242 0 133.565217 12.720497 197.167701 101.763975-12.720497-6.360248-120.84472 57.242236-120.84472 184.447205zM506.096894 235.329193c-6.360248-57.242236 25.440994-120.84472 57.242236-159.006212C601.500621 31.801242 665.103106 0 722.345342 0c6.360248 57.242236-19.080745 120.84472-57.242236 165.36646-38.161491 38.161491-101.763975 76.322981-159.006212 69.962733z m0 0"
                        fill="#6c757d"
                        p-id="2511"
                      ></path>
                    </svg>
                    <svg
                      t="1678765619467"
                      className="icon"
                      viewBox="0 0 1025 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2761"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M436.8 140.8s-83.2-6.4-134.4 64c-51.2 64-12.8 166.4 12.8 217.6 25.6 51.2 153.6 262.4 160 268.8 6.4 6.4 12.8 0 12.8 0 0-6.4 12.8-300.8 0-377.6-6.4-76.8-44.8-166.4-51.2-172.8zM155.2 275.2c-6.4 0-76.8 70.4-83.2 134.4-6.4 64 25.6 108.8 102.4 160 76.8 57.6 262.4 160 268.8 147.2 6.4-6.4-70.4-140.8-134.4-236.8-64-102.4-140.8-204.8-153.6-204.8z m25.6 601.6c57.6 25.6 147.2-32 166.4-51.2 25.6-19.2 64-51.2 64-51.2l-320 6.4c6.4 12.8 32 76.8 89.6 96z m6.4-256C129.6 595.2 14.4 524.8 8 524.8c-6.4 0-19.2 83.2 12.8 147.2 38.4 64 108.8 83.2 140.8 83.2 38.4 6.4 256 0 256 0s-172.8-108.8-230.4-134.4z m537.6-422.4c-51.2-70.4-134.4-64-134.4-64-6.4 12.8-44.8 102.4-51.2 179.2-12.8 76.8 0 371.2 0 377.6 0 6.4 6.4 6.4 12.8 0s134.4-211.2 160-268.8c25.6-51.2 64-153.6 12.8-224z m294.4 326.4c-6.4 0-121.6 64-179.2 96-57.6 25.6-230.4 134.4-230.4 134.4 0 6.4 217.6 6.4 256 0 32-6.4 102.4-25.6 140.8-83.2 32-64 12.8-140.8 12.8-147.2zM673.6 832c25.6 19.2 115.2 70.4 166.4 51.2 57.6-25.6 89.6-89.6 89.6-89.6l-320-6.4c0-6.4 44.8 25.6 64 44.8z m281.6-422.4c-6.4-64-70.4-134.4-83.2-134.4-6.4 0-89.6 102.4-153.6 204.8-64 96-140.8 230.4-134.4 243.2 6.4 6.4 192-96 268.8-147.2 76.8-57.6 108.8-102.4 102.4-166.4z"
                        fill="#6c757d"
                        p-id="2762"
                      ></path>
                    </svg>
                    <svg
                      t="1678765637914"
                      className="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="3012"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M140.8 332.8c-32 0-64 25.6-64 64v262.4c0 32 25.6 64 64 64 32 0 64-25.6 64-64V396.8c0-38.4-32-64-64-64z m89.6 422.4c0 38.4 32 70.4 70.4 70.4h44.8V960c0 32 25.6 64 64 64 32 0 64-25.6 64-64v-140.8h83.2V960c0 32 25.6 64 64 64 32 0 64-25.6 64-64v-140.8h44.8c38.4 0 70.4-32 70.4-70.4V345.6H230.4v409.6zM652.8 96L697.6 12.8c0-6.4 0-12.8-6.4-12.8s-6.4 0-12.8 6.4l-44.8 76.8C595.2 70.4 556.8 57.6 512 57.6s-89.6 6.4-121.6 25.6L345.6 6.4C339.2 0 332.8 0 332.8 0c-6.4 0-6.4 6.4-6.4 12.8l44.8 83.2c-89.6 44.8-147.2 128-147.2 224h569.6c0-96-57.6-179.2-140.8-224zM384 217.6c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6c12.8 6.4 19.2 12.8 19.2 25.6s-6.4 25.6-19.2 25.6z m256 0c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6c12.8 6.4 25.6 12.8 25.6 25.6s-12.8 25.6-25.6 25.6z m243.2 115.2c-32 0-64 25.6-64 64v262.4c0 32 25.6 64 64 64 32 0 64-25.6 64-64V396.8c0-38.4-32-64-64-64z m0 0"
                        fill="#6c757d"
                        p-id="3013"
                      ></path>
                    </svg>
                  </span>
                </p>
                <p>
                  浙ICP备15005796号-2 浙公网安备33010602002000号 ICP 经营许可
                  浙B2-20201554
                </p>
                <p>杭州堆栈科技有限公司版权所有</p>
              </div>
            </div>
          </div>
        </Layout.Content>
      </Layout>
    </div>
  );
}
